<template>
  <div class="login_wrap">
    <div class="login_form">
      <div class="form_lt"></div>
      <div class="form_rt">
        <div class="form_title">欢迎回来</div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0px" status-icon class="form_box">
          <el-form-item prop="userName">
            <el-input v-model="ruleForm.userName" placeholder="请输入用户名" :prefix-icon="User" />
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input v-model="ruleForm.passWord" type="password" placeholder="请输入密码" show-password
              :prefix-icon="Lock" />
          </el-form-item>
        </el-form>
        <div class="login_remember">
          <el-checkbox v-model="isRememberPW" label="记住密码" />
        </div>
        <div class="login_btn">
          <el-button type="primary" @click="handleLogin(ruleFormRef)">登 录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
import { login } from "@/api/Login";
import {
  setToken,
  getRemember,
  setRemember,
  removeRemember,
} from "../utils/storage";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  userName: "",
  passWord: "",
});
const rules = reactive<FormRules>({
  userName: [{ required: true, message: "请输入用户名", trigger: "change" }],
  passWord: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
    { min: 3, max: 20, message: "长度应为3-20", trigger: "blur" },
  ],
});

const router = useRouter();

let isRememberPW = ref(Boolean(getRemember()));
let loginBtnLoading = ref(false);

if (isRememberPW.value) {
  let { userName, passWord } = JSON.parse(getRemember());
  ruleForm.userName = userName;
  ruleForm.passWord = passWord;
}

// const $md5 = getCurrentInstance()?.appContext.config.globalProperties.$md5;

const handleLogin = async (formEl: FormInstance | undefined) => {
  if (loginBtnLoading.value) return;
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loginBtnLoading.value = true;
      // 如果选择了记住密码
      if (isRememberPW.value) {
        setRemember(
          JSON.stringify({
            userName: ruleForm.userName,
            passWord: ruleForm.passWord,
          })
        );
      } else {
        removeRemember();
      }
      // ruleForm.passWord = $md5(ruleForm.passWord);
      login(ruleForm).then((res: any) => {
        loginBtnLoading.value = false;

        const { code, token } = res;
        if (code === 0) {
          if (token) {
            setToken(token);
            ElMessage({
              message: '登录成功',
              type: "success",
            });
            router.push({ path: "/" });
          } else {
            ElMessage.error("获取失败，请重试！");
          }
        }
      });
    }
  });
};
</script>

<style lang="less" scoped>
.login_wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eaecee;
  background-image: url(../assets/imgs/login_bg.jpeg);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .login_form {
    position: absolute;
    top: 50%;
    width: 1200px;
    height: 500px;
    left: 50%;
    background-image: url(../assets/imgs/form_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    transform: translate3d(-50%, -50%, 0);
    display: flex;

    .form_lt {
      flex: 1;
      background-image: url(../assets/imgs/form_lt.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      margin: 60px 0 0 60px;
    }

    .form_rt {
      flex: 1;
      margin: 60px 40px;

      .form_title {
        color: #444;
        font-weight: bold;
        font-size: 26px;
        padding-left: 40px;
      }

      .form_box {
        padding: 60px 0 0 40px;
        width: 340px;
      }

      .login_remember {
        padding: 0 0 0 40px;
      }

      .login_btn {
        padding: 10px 0 0 40px;
        width: 340px;

        .el-button {
          width: 100%;
        }
      }
    }

    .el-form-item {
      margin-bottom: 20px;
    }
  }
}
</style>